import ChartTitle from '@/components/Visual/chartTitle';
import { echartsResize } from '@/utils/echartsResize';
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
import './index.less';
import type { WeekCompare } from '../types';

function OperationalDiff(props: {
  weekCompare: WeekCompare | null;
  todayCompare: WeekCompare | null;
}) {
  let charEle;
  const { weekCompare, todayCompare } = props;
  const chartRef: any = useRef(null); //拿到eCharts容器
  const top = 60;
  //   let bottom = 60;
  const legendData = ['上周平均数据', '今日平均数据'];
  const yAxisLabel = ['录单率', '缴费率', '补缴率', '周转率'];
  const data1 = [];
  const data2 = [];
  if (weekCompare) {
    data1.push(weekCompare.entryRate * 100);
    data1.push(weekCompare.payRate * 100);
    data1.push(weekCompare.recoveryRate * 100);
    data1.push(weekCompare.turnoverRate * 100);
  }
  if (todayCompare) {
    data2.push(todayCompare.entryRate * 100);
    data2.push(todayCompare.payRate * 100);
    data2.push(todayCompare.recoveryRate * 100);
    data2.push(todayCompare.turnoverRate * 100);
  }

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const option = {
    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(112,112,112,0)',
        },
      },
      formatter: function (params: any) {
        const name = params[0].name;
        return name + ':<br/>' + params[0].seriesName + ':' + params[0].data.toFixed(2) + '%';
      },
      backgroundColor: 'rgba(0,0,0,0.7)', // 背景
      padding: [8, 10], //内边距
      color: '#fff',
      extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
    },
    legend: {
      left: 'center',
      top: 0,
      //   orient: 'horizontal',
      itemWidth: 8, //图例标记的图形宽度
      itemHeight: 8, //图例标记的图形高度
      borderRadius: 0,
      itemGap: 15,
      data: [
        {
          name: '上周平均数据',
          icon: 'rect',
          textStyle: {
            color: '#D0DEEE',
          },
          itemStyle: {
            color: '#D0DEEE',
          },
        },
        {
          name: '今日平均数据',
          icon: 'rect',
          textStyle: {
            color: '#D0DEEE',
          },
          itemStyle: {
            color: '#159AFF',
          },
        },
      ],
    },
    grid: [
      {
        right: '50%',
        width: '45%',
        containLabel: true,
        bottom: 20,
        top: 10,
      },
      {
        left: '50%',
        width: '1%',
        top: top + 30,
        bottom: 100,
      },
      {
        left: '50%',
        width: '45%',
        top: 10,
        containLabel: true,
        bottom: 20,
      },
    ],
    xAxis: [
      {
        // name: '%',
        type: 'value',
        gridIndex: 0,
        inverse: true,
        axisLabel: {
          color: '#6C8097',
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            // 分割线样式设置
            color: 'rgba(108, 128, 151, 0.3)', // 分割线颜色
            width: 1, // 分割线宽度
            type: 'dashed', // 分割线类型-虚线
            opacity: 0.5, // 分割线透明度0.5
          },
        },
      },
      {
        gridIndex: 1,
        show: false,
      },
      {
        gridIndex: 2,
        type: 'value',
        name: '%',
        axisLabel: {
          color: '#6C8097',
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            // 分割线样式设置
            color: 'rgba(108, 128, 151, 0.3)', // 分割线颜色
            width: 1, // 分割线宽度
            type: 'dashed', // 分割线类型-虚线
            opacity: 0.5, // 分割线透明度0.5
          },
        },
      },
    ],
    yAxis: [
      {
        position: 'center',
        gridIndex: 0,
        axisLabel: {
          color: '#D0DEEE',
          show: true,
          fontSize: 12,
        },
        axisLine: {
          show: false,
        },
        type: 'category',
        inverse: false,
        axisTick: {
          show: false,
        },
        data: yAxisLabel,
      },
      {
        gridIndex: 1,
        position: 'center',
        type: 'category',
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: '#6C8097',
            opacity: 0.4,
          },
        },
      },
      {
        gridIndex: 2,
        // name:"%",
        position: 'center',
        axisLabel: {
          show: false,
          color: `#262C41`,
        },
        axisLine: {
          show: false,
        },
        type: 'category',
        inverse: false,

        axisTick: {
          show: false,
        },
        data: yAxisLabel,
      },
    ],
    series: [
      {
        name: legendData[0],
        type: 'bar',
        barWidth: 10,
        label: {
          color: '#767676',
          position: 'left',
          fontSize: 12,
        },

        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 1, color: 'rgba(208, 222, 238, 0.1)' },
            { offset: 0, color: '#D0DEEE' },
          ]),
        },
        data: data1,
        zlevel: 9,
      },
      {
        name: legendData[0],
        type: 'bar',
        barWidth: 22,
        barGap: '-160%',
        label: {
          color: '#767676',
          position: 'left',
          fontSize: 12,
        },
        tooltip: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: '#6C8097',
            opacity: 0.1,
          },
        },
        data: [100, 100, 100, 100],
        zlevel: 8,
      },
      {
        xAxisIndex: 2,
        yAxisIndex: 2,
        type: 'bar',
        barWidth: 10,
        name: legendData[1],
        label: {
          color: '#767676',
          position: 'right',
          fontSize: 12,
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: 'rgba(21, 154, 255, 0.1)' },
            { offset: 1, color: '#159AFF' },
          ]),
        },
        data: data2,
      },
      {
        xAxisIndex: 2,
        yAxisIndex: 2,
        name: legendData[1],
        type: 'bar',
        barWidth: 22,
        barGap: '-160%',
        label: {
          color: '#767676',
          position: 'left',
          fontSize: 12,
        },
        tooltip: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: '#6C8097',
            opacity: 0.1,
          },
        },
        data: [100, 100, 100, 100],
      },
    ],
  };
  useEffect(() => {
    const initChart = () => {
      const char = document.getElementById('operational_diff');
      if (char) {
        charEle = echarts.init(char);
        chartRef.current = charEle;
        charEle.setOption(option as any);
        echartsResize(charEle);
      }
    };
    initChart();
  }, []);
  useEffect(() => {
    if (chartRef.current) {
      chartRef.current.setOption(option as any);
    }
  }, [option, props]);
  return (
    <div className="operational_diff">
      <div className="title">
        <ChartTitle title="运营情况对比" />
        <img className="polyline" src="/visual/tabTitlePolyline.svg" alt="" />
        <img className="diamond" src="/visual/titleRectangle.svg" alt="" />
      </div>
      <div id="operational_diff" className="chart" ref={chartRef} />
    </div>
  );
}

export default OperationalDiff;
